<template>
  <div :style="{backgroundImage: `url(${imageUrl + '/img/bg_fang.png'})`}"
       class="free-course"
  >
    <nav-bar background="none">免费领取试听课</nav-bar>


    <div class="content">
      <video v-if="!modalShow" class="video" :src="video"></video>

      <div class="detail">
        <parser :html="content"></parser>
      </div>
    </div>

    <my-button :height="100" :margin-top="40" :width="670" @tap="reqExchangeTrailClass">立即领取</my-button>

    <modal-success v-if="modalShow">
      <template class="modal">
        <h1 class="modal-title">领取成功</h1>

        <p class="modal-content">试听课领取成功，快去试听吧~</p>

        <my-button :height="100" :margin-top="30" :width="470" @tap="sure">确定</my-button>

        <white-space height="20"/>
      </template>
    </modal-success>
  </div>
</template>

<script>
  import { imageUrl } from "../../api/url.config";
  import { mapActions, mapState } from 'vuex'
  import { NavigateBack } from "../../utils/router";
  import Parser from "../../component/parser/index";

  export default {
    name: "free_course",
    components: { Parser },
    data() {
      return {
        imageUrl,
        content: '',
        video: ''
      }
    },
    computed: mapState('Tools', ['modalShow']),
    methods: {
      ...mapActions('User', ['reqExchangeTrailClass', 'reqAuditions']),
      ...mapActions('Tools', ['hiddenModal']),
      NavigateBack,
      sure() {
        this.hiddenModal();
        this.NavigateBack()
      }
    },
    async onShow() {
      const { data: { video, content } } = await this.reqAuditions();
      this.content = content;
      this.video = video
    }
  }
</script>

<style lang="scss">
  @import "../../uni";

  .pic {
    width: upx(298);
    height: upx(298);
  }

  .free-course {
    height: 100vh;

    .content {
      width: upx(670);
      margin: upx(30) auto;
    }

    .video {
      display: block;
      width: upx(638);
      height: upx(358);
      border: upx(16) solid #fff;
      border-radius: upx(24);
      margin: upx(30) auto;
    }

    .detail {
      background: #fff;
      padding: upx(20);
      border-radius: upx(24);

      p {
        @include ft(32, #273C3D, 500)
        line-height: 1.5;
      }

      .pics {
        display: flex;
        justify-content: space-between;
      }
    }

    .modal {
      &-title {
        @include ft(40, #273C3D, 500);
        margin-top: upx(20);
      }

      &-content {
        @include ft(32, #273C3D, 400);
        margin-top: upx(16);
      }
    }
  }
</style>
